<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>状态机设计模式：让你的代码比if-else优雅100倍</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4f46e5;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 代码块美化 */
        pre {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-radius: 1rem;
            padding: 2rem;
            overflow-x: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            margin: 2rem 0;
        }
        
        pre::before {
            content: attr(data-language);
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            background: #4f46e5;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.75rem;
            text-transform: uppercase;
            font-weight: 600;
        }
        
        code {
            color: #e2e8f0;
            font-family: 'Fira Code', 'Consolas', monospace;
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        /* 标题样式 */
        h2 {
            position: relative;
            padding-left: 1.5rem;
            margin: 3rem 0 1.5rem;
        }
        
        h2::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0.5rem;
            height: 2rem;
            background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%);
            border-radius: 0.25rem;
        }
        
        /* 卡片悬停效果 */
        .card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        /* 引用块样式 */
        .quote-block {
            position: relative;
            padding: 2rem 3rem;
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-radius: 1rem;
            margin: 2rem 0;
        }
        
        .quote-block::before {
            content: '\f10d';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 1rem;
            left: 1rem;
            font-size: 2rem;
            color: #f59e0b;
            opacity: 0.3;
        }
        
        /* 数据可视化容器 */
        .mermaid {
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin: 2rem 0;
        }
        
        /* 列表美化 */
        ul {
            list-style: none;
            padding-left: 0;
        }
        
        ul li {
            position: relative;
            padding-left: 2rem;
            margin: 1rem 0;
        }
        
        ul li::before {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            left: 0;
            color: #10b981;
        }
        
        /* 滚动动画 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <div class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative max-w-7xl mx-auto px-4 py-24 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight">
                    状态机设计模式
                </h1>
                <p class="text-2xl md:text-3xl mb-8 font-light">
                    让你的代码比if-else优雅100倍
                </p>
                <div class="flex justify-center space-x-8 text-lg">
                    <div class="flex items-center">
                        <i class="fas fa-code mr-2"></i>
                        <span>代码量减少40%</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-bug mr-2"></i>
                        <span>Bug减少80%</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-clock mr-2"></i>
                        <span>理解时间缩短7倍</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="white"/>
            </svg>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-6xl mx-auto px-4 py-12">
        <!-- 引言卡片 -->
        <div class="card bg-white rounded-2xl shadow-xl p-8 mb-12 fade-in">
            <p class="drop-cap text-lg leading-relaxed text-gray-700">
                还在为那些堆积如山的if-else语句头疼吗？每次需求变更，你是否都要在条件分支的迷宫中挣扎？我曾经维护过一个有着23层嵌套条件判断的"遗留代码"，那段经历让我发誓再也不写这样的代码。状态机设计模式不仅能让你的代码结构清晰，还能让复杂逻辑变得优雅简洁。当我第一次将一个1000行的条件判断重构为状态机后，不仅代码量减少了40%，bug也减少了80%！更重要的是，团队中的新成员只需一天就能理解整个流程，而不是之前需要的一周。
            </p>
        </div>

        <!-- 状态机概念可视化 -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8 mb-12 fade-in">
            <h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">
                <i class="fas fa-diagram-project mr-2 text-indigo-600"></i>
                状态机核心概念关系图
            </h3>
            <div class="mermaid">
                graph TB
                    A[状态机 FSM] --> B[状态 State]
                    A --> C[事件 Event]
                    A --> D[转换 Transition]
                    
                    B --> B1[待机状态]
                    B --> B2[运行状态]
                    B --> B3[完成状态]
                    
                    C --> C1[用户操作]
                    C --> C2[系统触发]
                    C --> C3[时间触发]
                    
                    D --> D1[状态A → 状态B]
                    D --> D2[执行动作]
                    D --> D3[条件判断]
                    
                    style A fill:#4f46e5,stroke:#333,stroke-width:3px,color:#fff
                    style B fill:#10b981,stroke:#333,stroke-width:2px,color:#fff
                    style C fill:#f59e0b,stroke:#333,stroke-width:2px,color:#fff
                    style D fill:#ef4444,stroke:#333,stroke-width:2px,color:#fff
            </div>
        </div>

        <!-- 第一部分：状态机的基本概念 -->
        <section class="mb-16 fade-in">
            <h2 class="text-3xl font-bold text-gray-800">
                <i class="fas fa-lightbulb mr-2 text-yellow-500"></i>
                一、状态机的基本概念
            </h2>
            
            <div class="grid md:grid-cols-3 gap-6 mt-8">
                <div class="card bg-white rounded-xl shadow-lg p-6">
                    <div class="text-4xl text-indigo-600 mb-4">
                        <i class="fas fa-cogs"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">什么是有限状态机(FSM)</h3>
                    <p class="text-gray-600">
                        有限状态机是一种数学模型，用于描述系统在不同状态之间的转换。它由三个基本元素组成：状态、事件和转换。
                    </p>
                </div>
                
                <div class="card bg-white rounded-xl shadow-lg p-6">
                    <div class="text-4xl text-green-600 mb-4">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">状态、事件与转换</h3>
                    <p class="text-gray-600">
                        状态代表系统在特定时刻的情况；事件是触发状态变化的动作；转换则定义了状态之间的切换规则。
                    </p>
                </div>
                
                <div class="card bg-white rounded-xl shadow-lg p-6">
                    <div class="text-4xl text-purple-600 mb-4">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">与if-else的本质区别</h3>
                    <p class="text-gray-600">
                        传统if-else是基于条件的编程，而状态机是基于状态的编程。这种思维方式的转变是本质区别。
                    </p>
                </div>
            </div>

            <!-- 简单的交通灯示例 -->
            <div class="mt-8">
                <pre data-language="javascript"><code>// 一个简单的状态机示例
const trafficLight = {
  state: 'red',
  transitions: {
    red: { change: 'green' },
    green: { change: 'yellow' },
    yellow: { change: 'red' }
  },
  dispatch(event) {
    this.state = this.transitions[this.state][event] || this.state;
    return this.state;
  }
};

console.log(trafficLight.state); // 'red'
trafficLight.dispatch('change');
console.log(trafficLight.state); // 'green'</code></pre>
            </div>
        </section>

        <!-- 第二部分：if-else地狱 -->
        <section class="mb-16 fade-in">
            <h2 class="text-3xl font-bold text-gray-800">
                <i class="fas fa-fire mr-2 text-red-500"></i>
                二、if-else地狱的真实面目
            </h2>
            
            <div class="quote-block">
                <p class="text-lg text-gray-800">
                    我曾经接手过一个在线商城的代码，其中订单处理逻辑有超过15个状态，每个状态下又有多种可能的操作。使用if-else实现的代码超过2000行，几乎没有人敢动它，因为没人能确定修改一处会不会影响其他地方。
                </p>
            </div>

            <!-- 问题展示卡片 -->
            <div class="grid md:grid-cols-2 gap-6 mt-8">
                <div class="bg-red-50 rounded-xl p-6 border-2 border-red-200">
                    <h3 class="text-xl font-bold text-red-800 mb-3">